<template>
  <div class="home-wrap">
    <div class="header">
      <div class="header-content">
        <div class="banner">
          <img alt="Vue logo" style="width: 64px; height: 64px" src="../../assets/logo.png">
          <div class="text">

            <h3  >酷腾实验资源管理平台</h3>
            <p  >创新教育，赋能未来</p>
          </div>
        </div>
        <div class="header-tabs">
          <a-tabs defaultActiveKey="1" style="margin-top: 20px">
            <a-tab-pane tab="过程" key="1">
            </a-tab-pane>
            <a-tab-pane tab="过程2" key="2">
            </a-tab-pane>
            <a-tab-pane tab="过程3" key="3">
            </a-tab-pane>
          </a-tabs>
        </div>
        <div class="header-user">
          <user-menu></user-menu>
        </div>
      </div>
    </div>
  <div class="home">
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="关键字">
                <a-input v-model="queryParam.keywords" placeholder="搜索名称"/>
              </a-form-item>
            </a-col>

            <a-col :md="6" :sm="24">
              <a-form-item label="状态">
                <a-select v-model="queryParam.status" placeholder="请选择"
                          allowClear >
                  <a-select-option value="1">进行中</a-select-option>
                  <a-select-option value="3">未开始</a-select-option>
                  <a-select-option value="4">已结束</a-select-option>
                  <a-select-option value="2">已下架</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :md="!advanced && 6 || 24" :sm="24">
            <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
              <a-button type="primary" @click="onSearch">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
            </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

    </a-card>


    <div class="card-list" ref="content" v-if="false">
      <a-list
              :grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}"
              :dataSource="dataSource"
      >
        <a-list-item slot="renderItem" slot-scope="item, index">
          <template v-if="item === null">
            <a-button class="new-btn" type="dashed">
              <a-icon type="plus"/>
              新增产品
            </a-button>
          </template>
          <template v-else>
            <a-card :hoverable="true">
              <a-card-meta>
                <div style="margin-bottom: 3px" slot="title">{{ item.title }}</div>
                <a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="large"/>
                <div class="meta-content" slot="description">{{ item.content }}</div>
              </a-card-meta>
              <template class="ant-card-actions" slot="actions">
                <a><a-icon type="heart" /></a>
                <a><a-icon type="heart" theme="filled" :style="{ fontSize: '16px', color: '#08c' }" /></a>
              </template>
            </a-card>
          </template>
        </a-list-item>
      </a-list>
    </div>

    <div class="ant-pro-pages-list-projects-cardList" v-if="false">
      <a-list :loading="loading" :data-source="article" :grid="{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }">
        <a-list-item slot="renderItem" slot-scope="item">
          <a-card class="ant-pro-pages-list-projects-card" hoverable>
            <img slot="cover" :src="item.cover" :alt="item.title" />
            <a-card-meta :title="item.title">
              <template slot="description">
                <ellipsis :length="50">{{ item.description }}</ellipsis>
              </template>
            </a-card-meta>
            <div class="cardItemContent">
              <span>{{ item.updatedAt }}</span>
              <div class="avatarList">
                <avatar-list size="small" :max-length="2">
                  <avatar-list-item
                          v-for="(member, i) in item.members"
                          :key="`${item.id}-avatar-${i}`"
                          :src="member.avatar"
                          :tips="member.name"
                  />
                </avatar-list>
              </div>
            </div>
          </a-card>
        </a-list-item>
      </a-list>
    </div>



    <a-row :gutter="8">
      <a-col :span="5">

        <div class="tree-wrapper">
          <a-input-search
                  v-model="queryParam.keywords"
                  @search="onSearch"
                  placeholder="搜索关键字"
                  style="width: 100%; margin-bottom: 1rem"
          />
          <a-menu
                  mode="inline" class="custom-tree"
          >
            <a-sub-menu v-for="cate in cateTree" v-if="cate.children">
              <span slot="title"><span>{{cate.title}}</span></span>
              <a-menu-item @click="handleCateClick" v-for="subcate in cate.children" :key="subcate.key"  >{{subcate.title}}</a-menu-item>
            </a-sub-menu>
            <a-menu-item @click="handleCateClick" v-else :key="subcate.key"  >{{cate.title}}</a-menu-item>
          </a-menu>
        </div>

      </a-col>
      <a-col :span="19">


        <s-table
                ref="table"
                size="default"
                :columns="columns"
                :data="loadData"
                :alert="false"
                :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        >

        <span slot="status" slot-scope="text,record">
          <template >
            <a-badge status="success" v-if="record.status==1" text="显示" />
            <a-badge status="default" v-else text="隐藏" />
            </template>
        </span>

          <span slot="rank" slot-scope="text,record">
        <template >
        <editable-cell :text="text" @change="onRankChange(record.id, 'rank', $event)"/>
        </template>
      </span>

          <span slot="action" slot-scope="text, record">
            <template>
              <a @click="handleEdit(record)">编辑</a>
              <a-divider type="vertical" />
            </template>
            <a-dropdown>
              <a class="ant-dropdown-link">
                更多 <a-icon type="down" />
              </a>
              <a-menu slot="overlay">
                <a-menu-item >
                  <a-popconfirm title="删除后不可恢复,确定删除吗?" @confirm="onDelete(record)"  okText="确定" cancelText="取消">
                    <a href="javascript:;">删除</a>
                  </a-popconfirm>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </span>
        </s-table>
      </a-col>
    </a-row>


    <h2># Trend 组件 </h2>

    <a-divider> 正常 </a-divider>

    <a-card>

      <trend flag="up" style="margin-right: 16px;">
        <span slot="term">工资</span>
        5%
      </trend>
      <trend flag="up" style="margin-right: 16px;">
        <span slot="term">工作量</span>
        50%
      </trend>
      <trend flag="down">
        <span slot="term">身体状态</span>
        50%
      </trend>

    </a-card>

    <a-divider> 颜色反转 </a-divider>

    <a-card style="margin-bottom: 3rem">

      <trend flag="up" :reverse-color="true" style="margin-right: 16px;">
        <span slot="term">工资</span>
        5%
      </trend>
      <trend flag="down" :reverse-color="true" style="margin-right: 16px;">
        <span slot="term">工作量</span>
        50%
      </trend>

    </a-card>

    <h2># AvatarList 组件 </h2>

    <a-divider> AvatarList </a-divider>
    <a-card style="margin-bottom: 3rem">
      <avatar-list :max-length="3">
        <avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
        <avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
        <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
        <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
        <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
        <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
        <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />

      </avatar-list>

      <a-divider type="vertical" style="margin: 0 16px" />

      <avatar-list size="mini">
        <avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
        <avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
        <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
      </avatar-list>
    </a-card>

    <h2># CountDown 组件 </h2>

    <a-divider> CountDown </a-divider>
    <a-card style="margin-bottom: 3rem">
      <count-down
        style="font-size: 2rem"
        :target="new Date().getTime() + 3000000"
        :on-end="onEndHandle">
      </count-down>

      <a-divider type="vertical" style="margin: 0 16px" />

      <count-down
        style="font-size: 2rem"
        :target="new Date().getTime() + 10000"
        :on-end="onEndHandle2">
      </count-down>
    </a-card>

    <h2># Ellipsis 组件 </h2>

    <a-divider> Ellipsis </a-divider>
    <a-card style="margin-bottom: 3rem">
      <ellipsis :length="100" tooltip>
        There were injuries alleged in three cases in 2015, and a
        fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.
      </ellipsis>
    </a-card>

    <h2># NumberInfo 组件 </h2>

    <a-divider> NumberInfo </a-divider>
    <a-card>
      <number-info
        :sub-title="() => { return 'Visits this week' }"
        :total="12321"
        status="up"
        :sub-total="17.1"></number-info>
    </a-card>
  </div>
  </div>
</template>

<script>
  // @ is an alias to /src

  import Trend from '@/components/Trend'
  import AvatarList from '@/components/AvatarList'
  import CountDown from '@/components/CountDown/CountDown'
  import Ellipsis from '@/components/Ellipsis'
  import NumberInfo from '@/components/NumberInfo'
  import STable from '@/components/table/'

  import UserMenu from '@/components/tools/UserMenu'

  const AvatarListItem = AvatarList.AvatarItem


  const dataSource = []
  for (let i = 0; i < 11; i++) {
    dataSource.push({
      title: 'Alipay',
      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
      content: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。'
    })
  }


  const article = []
  for (let i = 0; i < 11; i++) {
    article.push({
      id: 3,
      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
      owner: '付小小',
      content: '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无',
      star: 3,
      percent: 43,
      like: 32,
      message: 32,
      description: '中台产品的研发过程中，会出现不同的设计规范',
      href: 'https://ant.design',
      title: 'Alipay',
      updatedAt: '212',
      members: [
        {
          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
          name: '曲丽丽',
          id: 'member1'
        },
        {
          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
          name: '王昭君',
          id: 'member2'
        },
        {
          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
          name: '董娜娜',
          id: 'member3'
        }
      ],
      activeUser: 3222,
      newUser: 212,
      cover: 'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png'
    })
  }


  export default {
    name: 'Home',
    components: {
      NumberInfo,
      Ellipsis,
      CountDown,
      Trend,
      AvatarList,
      AvatarListItem,
      STable,
      UserMenu
    },
    data () {
      return {
        targetTime: new Date().getTime() + 3900000,
        queryParam:{

        },
        advanced:false,
        loading:false,
        dataSource,
        article,

        selectedRowKeys: [],
        selectedRows: [],

        cateTree: [
          {"id":1,"key":1,"value":"1","parent_id":0,"title":"协议","children":
                    [{"id":3,"key":3,"value":"3","parent_id":1,"title":"注册"},
                      {"id":4,"key":4,"value":"4","parent_id":1,"title":"财务"},
                      {"id":8,"key":8,"value":"8","parent_id":1,"title":"入驻协议"}]
          },
          {"id":2,"key":2,"value":"2","parent_id":0,"title":"帮助","children":
                    [{"id":5,"key":5,"value":"5","parent_id":2,"title":"用户帮助"},
                      {"id":6,"key":6,"value":"6","parent_id":2,"title":"品荐师帮助"},
                      {"id":7,"key":7,"value":"7","parent_id":2,"title":"商户帮助"}]}
        ],
      }
    },
    methods: {
      onSearch(){

      },
      onEndHandle () {
        this.$message.success('CountDown callback!!!')
      },
      onEndHandle2 () {
        this.$notification.open({
          message: 'Notification Title',
          description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
        })
      }
    }
  }
</script>
<style>

  .header-tabs   .ant-tabs-bar{
    border: none !important;
  }

  .header-user .action {
    cursor: pointer;
    padding: 0 12px;
    display: inline-block;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    height: 100%;
  }
  .header-user .avatar {
    margin: 20px 8px 20px 0;
    color: #1890ff;
    background: hsla(0, 0%, 100%, 0.85);
    vertical-align: middle;
  }

</style>
<style  lang="less" scoped>

  .home-wrap{
    background-color: #F0F2F9;
  }
  .header{
    height: 74px;
    padding: 0 12px 0 0;
    background: #fff;
    -webkit-box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
    box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
    position: fixed;
    top:0;
    left: 0;
    z-index: 10;
    right: 0;
  }
  .header-content{
    width: 1200px;
    margin: 0 auto;
    padding: 10px 0 ;
  }
  .header-content .banner{
    float: left;
    margin-right: 20px;
  }
  .header-content .banner img {
    float: left;
    margin-right: 10px;
  }
  .header-content .banner .text {
    float: left;
    width: 200px;
  }
  .header-content .header-tabs{
    float: left;
  }
  .header-content .header-user{
    float: right;
  }

  .home {
    width: 1200px;
    margin: 64px auto;
    padding: 25px 0;

  }

  .ant-pro-pages-list-projects-cardList {
    margin-top: 24px;

    /deep/ .ant-card-meta-title {
      margin-bottom: 4px;
    }

    /deep/ .ant-card-meta-description {
      height: 44px;
      overflow: hidden;
      line-height: 22px;
    }

    .cardItemContent {
      display: flex;
      height: 20px;
      margin-top: 16px;
      margin-bottom: -4px;
      line-height: 20px;

      > span {
        flex: 1 1;
        color: rgba(0,0,0,.45);
        font-size: 12px;
      }

      /deep/ .ant-pro-avatar-list {
        flex: 0 1 auto;
      }
    }
  }
</style>
